<template>
  <drag-div>
    <div slot="left" class="m" style="height: 100%;margin: 0">
      <left-workflow-type
        @handleNodeClick="handleNodeClick"
      ></left-workflow-type>
    </div>
    <div slot="right" style="padding: 10px">
      <el-row>
        <div class="p10">
          <el-col :span="24">
            <div>
              <el-row :gutter="4">
                <el-form :inline="true">
                  <el-form-item label="标题:">
                    <el-input
                      placeholder="请输入标题"
                      v-model="searchDto.title"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="发起人:">
                    <el-input
                      placeholder="请输入发起人"
                      v-model="searchDto.sender"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="时间:">
                    <el-date-picker
                      v-model="value4"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item class="clear_item-margin-bottom">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="getPageData()"
                    >
                      查询
                    </el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-s-open"
                      @click="clear()"
                    >
                      重置
                    </el-button>
                    <el-button
                      type="success"
                      icon="el-icon-s-cooperation"
                      @click="archiveByInstanceList()"
                    >
                      归档
                    </el-button>
                    <el-button
                      type="success"
                      icon="el-icon-s-cooperation"
                      @click="showArchiveByLaunchTimeDialog()"
                    >
                      一键归档
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-row>
            </div>
            <div class="table_content">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="已完结" name="first"></el-tab-pane>
                <el-tab-pane label="已归档" name="archive"></el-tab-pane>
              </el-tabs>
              <page-table
                ref="multipleSelection"
                :page-data="pageData"
                :loading="loading"
                :do-get-page-data="getPageData"
                :select-change="handleSelectionChange"
              >
                <el-table-column
                  type="selection"
                  align="center"
                  :selectable="selectable"
                  width="50"
                >
                </el-table-column>
                <el-table-column
                  width="220"
                  prop="title"
                  label="标题"
                  align="left"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <a class="task_title_a" @click="taskEdit(scope.row)">
                      {{ scope.row.title }}
                    </a>
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  width="150"
                  prop="flowName"
                  label="流程"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="stepName"
                  label="所在步骤"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="senderName"
                  label="发起人"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="receiverName"
                  label="处理人"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="receiveTime"
                  label="发起日期"
                  align="center"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="instanceStatus"
                  label="状态"
                  align="center"
                >
                  <template slot-scope="scope">
                    <sz-badge
                      :value="
                        !scope.row.archiveStatus
                          ? scope.row.instanceRunStatus &&
                            scope.row.instanceRunStatus == 'END'
                            ? '已终止'
                            : scope.row.instanceStatus
                            ? '已完结'
                            : '未完结'
                          : '已归档'
                      "
                      :type="statusStyle(scope.row)"
                    ></sz-badge>
                  </template>
                </el-table-column>
                <el-table-column
                  label="管理"
                  width="250"
                  align="center"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      @click="showFlowNode(scope.row)"
                    >
                      流程轨迹
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click="showInstance(scope.row)"
                    >
                      工作任务
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click="stopInstance(scope.row)"
                      v-if="
                        !scope.row.instanceRunStatus &&
                          scope.row.instanceStatus != true
                      "
                    >
                      终止实列
                    </el-button>
                  </template>
                </el-table-column>
              </page-table>
            </div>
          </el-col>
        </div>
        <el-dialog
        :close-on-click-modal="false"
          :visible.sync="showFlowNodeHistory"
          v-if="showFlowNodeHistory"
          title="流程轨迹:"
          width="40%"
          destroy-on-close
        >
          <el-row>
            <el-col>
              <flow-node-history :task-id="curTaskId"></flow-node-history>
            </el-col>
          </el-row>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" title="工作任务列表:" :visible.sync="showInstanceStatus">
          <page-table
            :page-data="pageData1"
            :loading="loading"
            :do-get-page-data="showInstance"
            :show-page="false"
          >
            <el-table-column
              width="220"
              prop="title"
              label="标题"
              align="left"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="flowName" label="流程" align="center">
            </el-table-column>
            <el-table-column prop="stepName" label="所在步骤" align="center">
            </el-table-column>
            <el-table-column
              prop="senderName"
              label="发起人"
              align="center"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="receiverName"
              label="处理人"
              align="center"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="receiveTime"
              label="接收日期"
              align="center"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.status | keyText("WORKFLOW_TASK_STATUS") }}
                </span>
              </template>
            </el-table-column>
          </page-table>
        </el-dialog>
        <el-dialog
        :close-on-click-modal="false"
          title="按时间段归档:"
          :visible.sync="showArchiveInstanceDialog"
          width="45%"
        >
          <el-form>
            <el-form-item>
              <el-date-picker
                v-model="startAndEndTime"
                type="daterange"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="archiveByLaunchTime" type="primary">
                确认归档
              </el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-row>
    </div>
  </drag-div>
</template>
<script>
import flowNodeHistory from "./flowNodeHistory";
import leftWorkflowType from "./leftWorkflowType";
import Moment from "moment";

export default {
  name: "instance",
  created() {
    this.initData();
  },
  components: {
    flowNodeHistory,
    leftWorkflowType
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近半年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      startAndEndTime: [],
      multipleSelection: [], //多选数据
      showArchiveInstanceDialog: false,
      showInstanceStatus: false,
      activeName: "first",
      loading: false,
      pageData: {},
      pageData1: {},
      value4: [],
      searchDto: {
        pageIndex: "",
        categoryId: "",
        pageSize: 10,
        title: "",
        sender: "",
        flowId: "",
        startTime: "",
        endTime: "",
        status: 1
      },
      showFlowNodeHistory: false,
      curTaskId: "", // 当前任务id
      categoryNow: "", //当前选择分类
      statusNow: 1 //当前选择状态
    };
  },
  watch: {},
  computed: {},
  methods: {
    //禁用多选框
    selectable(row, index) {
      if (row.archiveStatus && row.archiveStatus == true) {
        return false; //禁用
      } else {
        return true; //可操作
      }
    },
    // 批量终止实例
    batchTermination() {
      if (this.multipleSelection.length == 0) {
        this.warning("请至少选择一条实例");
        return;
      }
      this.$confirm("确认终止选中实列?", "提示", {})
        .then(() => {
          let arr = [];
          this.multipleSelection.map(item => {
            arr.push(item.instanceId);
          });
          let tem = { body: arr };
          this.API.endBatchFlowByInstanceId(tem).then(ret => {
            this.$message({
              message: "批量终止成功",
              type: "success"
            });
            this.getPageData();
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 勾选归档
    archiveByInstanceList() {
      let ids = null;
      let msg = "";
      if (this.multipleSelection.length == 0) {
        this.warning("请至少选择一条实例");
        return;
      }
      ids = [];
      this.multipleSelection.map(item => {
        ids.push(item.instanceId);
      });
      msg = "确认归档选中实列?";
      this.$confirm(msg, "提示", {})
        .then(() => {
          let tem = { body: ids };
          this.API.archiveByInstanceList(tem).then(ret => {
            this.getPageData();
            this.$message({
              message: "批量归档成功",
              type: "success"
            });
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    showArchiveByLaunchTimeDialog() {
      this.showArchiveInstanceDialog = true;
    },
    // 根据时间段归档
    archiveByLaunchTime() {
      let tem = {
        startTime: this.startAndEndTime[0],
        endTime: this.startAndEndTime[1]
      };
      this.API.archiveByLaunchTime(tem).then(ret => {
        this.getPageData();
        this.showArchiveInstanceDialog = false;
        this.$message({
          message: "批量归档成功",
          type: "success"
        });
      });
    },
    // 批量催办
    remindByInstanceList(operate) {
      let ids = null;
      let msg = "";
      if (operate === 0) {
        if (this.multipleSelection.length == 0) {
          this.warning("请至少选择一条实例");
          return;
        }
        ids = [];
        this.multipleSelection.map(item => {
          ids.push(item.instanceId);
        });
        msg = "确认催办选中实列?";
      } else {
        msg = "确认一键催办?";
      }
      this.$confirm(msg, "提示", {})
        .then(() => {
          let tem = { body: ids };
          this.API.remindByInstanceList(tem).then(ret => {
            this.$message({
              message: "批量催办成功",
              type: "success"
            });
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    //多选事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 状态颜色设置
    statusStyle(row) {
      let cls = "";
      switch (row.instanceStatus) {
        case true:
          cls = "success";
          break;
        default:
          cls = "warning";
          break;
      }
      switch (row.instanceRunStatus) {
        case "END":
          cls = "danger";
          break;
      }
      return cls;
    },
    //初始化
    initData() {
      this.searchDto.flowId = this.$route.query.flowId;

      this.getPageData();
    },

    //获取分页
    getPageData(val) {
      this.searchDto.startTime = "";
      this.searchDto.endTime = "";
      if (this.value4 && this.value4.length > 0) {
        this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      let tem = Object.assign(this.searchDto, val);
      this.API.getWorkflowTaskInstancePageList(tem).then(ret => {
        console.log("pageData", ret.data);
        this.pageData = ret.data;
      });
    },
    //重置
    clear() {
      this.searchDto = {
        pageIndex: "",
        categoryId: "",
        pageSize: 10,
        title: "",
        sender: "",
        flowId: "",
        startTime: "",
        endTime: "",
        status: 1
      };
      this.value4 = [];
      this.getPageData();
    },

    // 左侧分类树的单击事件
    handleNodeClick(val) {
      this.searchDto = {
        pageIndex: "",
        categoryId: "",
        pageSize: 10,
        title: "",
        sender: "",
        flowId: "",
        startTime: "",
        endTime: "",
        status: this.statusNow
      };
      if (val.type !== "CATEGORY") {
        this.searchDto.flowId = val.id;
      } else {
        this.categoryNow = val.id;
        this.searchDto.categoryId = this.categoryNow;
      }
      this.getPageData();
    },
    // 显示流程轨迹面板
    showFlowNode(row) {
      this.curTaskId = row.id;
      console.log(this.curTaskId);
      this.showFlowNodeHistory = true;
    },
    //查询工作任务
    showInstance(row) {
      console.log(row.instanceId);
      let tem = {
        id: row.instanceId
      };
      this.API.getWorkflowTaskByInstanceId(tem).then(ret => {
        this.pageData1 = { records: ret.data };
        console.log(this.pageData1);
      });
      this.showInstanceStatus = true;
    },
    //终止实例
    stopInstance(row) {
      this.$confirm("确认终止当前实列?", "提示", {})
        .then(() => {
          if (row.instanceId) {
            this.API.endFlowByInstanceId({ id: row.instanceId }).then(res => {
              this.$message({
                message: "终止成功",
                type: "success"
              });
              this.getPageData();
            });
          }
        })
        .catch(() => {});
    },
    // 跳转任务处理
    taskEdit(row) {
      let routeData = this.$router.resolve({
        path: "/workflow/apply",
        query: { flowId: row.flowId, taskId: row.id }
      });
      this.openPage(routeData.href);
    },
    //点击切换status
    handleClick(tab, event) {
      let status = "";
      switch (tab.paneName) {
        case "all":
          status = "";
          break;
        case "first":
          status = 1;
          break;
        case "second":
          status = 0;
          break;
        case "third":
          status = 2;
          break;
        case "archive":
          status = 3;
          break;
      }
      this.statusNow = status;
      this.searchDto.pageIndex = 1;
      this.searchDto.status = this.statusNow;
      this.getPageData();
    }
  }
};
</script>
<style scoped lang="less"></style>
